<template>
  <div>
    <el-dialog title="休假申请" :visible.sync="isShow" width="40%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <div>
          <el-form-item label="休假类型" prop="ACTIVITYTYPE">
            <el-select v-model="form.ACTIVITYTYPE" clearable size="small" placeholder="请选择休假类型">
              <el-option v-for="item in actOptions" :key="item.ACTIVITYTYPE" :label="item.ACTIVITYTYPENAME"
                :value="item.ACTIVITYTYPE"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <!-- <el-form-item label="休假时间" prop="TIME">
                    <el-date-picker
                        v-model="form.time"
                        type="datetimerange"
                        format="yyyy-MM-dd HH:mm" value-format="yyyyMMddHHmmss"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item> -->

        <el-form-item label="开始时间" prop="SRTDATETIME">
          <el-date-picker size="small" format="yyyy-MM-dd HH:mm" value-format="yyyyMMddHHmmss"
            v-model="form.SRTDATETIME" type="datetime" placeholder="休假开始日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="ENDDATETIME">
          <el-date-picker size="small" format="yyyy-MM-dd HH:mm" value-format="yyyyMMddHHmmss"
            v-model="form.ENDDATETIME" type="datetime" placeholder="休假结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="休假时数" prop="HOURS">
          <el-input size="small" v-model="form.HOURS" placeholder="请输入休假时数"></el-input>
        </el-form-item>
        <el-form-item label="添加注释" prop="NOTE1">
          <el-input type="textarea" size="small" v-model="form.NOTE1" placeholder="请输入注释"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import request from "@/common/utils/requestWFM";
  import Add from '@/message/wfm/userScheduleManage/vacationRequest/vrAdd'
  import ActivityQuery from '@/message/wfm/scheduleDataManage/activityManage/actQuery'
  import toolBox from '@/common/utils/toolBox'
  export default {
    props: {
      option: Object,
    },
    mounted() {
      this.actQuery()
    },
    watch: {
      'form.SRTDATETIME'(val){
        let time = ''
        let hours = ''
        let min = ''
        if(this.form.ENDDATETIME != '' && this.form.ENDDATETIME > this.form.SRTDATETIME){
          time = this.formDate(toolBox.timeFormat(this.form.ENDDATETIME)) - this.formDate(toolBox.timeFormat(val))
          hours = parseInt(time/1000/3600)
          min = (time - hours*1000*3600)/1000/60
          this.form.HOURS = ((hours <= 9)?('0'+hours):hours) + ':'+((min<=9)?('0'+min):min)

        }
      },
      'form.ENDDATETIME'(val){
        let time = ''
        let hours = ''
        let min = ''
        if(this.form.SRTDATETIME != '' && this.form.ENDDATETIME > this.form.SRTDATETIME){
          time = this.formDate(toolBox.timeFormat(val)) - this.formDate(toolBox.timeFormat(this.form.SRTDATETIME))
          hours = parseInt(time/1000/3600)
          min = (time - hours*1000*3600)/1000/60
          this.form.HOURS = ((hours <= 9)?('0'+hours):hours) + ':'+((min<=9)?('0'+min):min)
      }
    },
    },
    data() {
      return {
        actOptions: [], //活动类型
        form: {
          ACTIVITYTYPE: '',
          AGENTID: this.$store.getters.UserNum,
          SRTDATETIME: '',
          ENDDATETIME: '',
          HOURS: '',
          NOTE1: ''
        },
        rules: {
          ACTIVITYTYPE: [{
            required: true,
            message: '请选择休假类型',
            trigger: 'change,blur'
          }, ],
          HOURS: [{
            required: true,
            message: '请填写休假时数',
            trigger: 'blur'
          }],
          SRTDATETIME: [{
            required: true,
            message: '请选择开始时间',
            trigger: 'change,blur'
          }],
          ENDDATETIME: [{
            required: true,
            message: '请选择结束时间',
            trigger: 'change,blur'
          }],
          // TIME:[
          //     {type:'array', required: true, message: '请选择休假时间', trigger: 'change,blur'}
          // ],
          NOTE1: [{
            required: true,
            message: '请填写注释',
            trigger: 'blur'
          }]
        }
      }
    },
    
    methods: {
      formDate (time) {
      const thisTime = time.replace(/ /g, '/')
      var nowTime = new Date(thisTime)
      nowTime = nowTime.getTime()
      return nowTime
    },
      // 活动查询
      async actQuery() {
        let resBody = new ActivityQuery()
        resBody.data.CurrPage = 1;
        resBody.data.ACTIVITYCATEG = '04';
        resBody.data.PageRowNum = 20;
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.actOptions = response.BODY.RSPSTRUCT
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      handleClose(done) {
        this.$refs.form.resetFields();
        done()
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addVaRequest()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置表单
      resetForm(formName) {
        if(this.$refs[formName] != undefined){
          this.$refs[formName].clearValidate();
        }
        this.$refs[formName].resetFields();
        this.option.dialogVisible = false
      },
      //休假申请
      async addVaRequest() {
        const {
          form
        } = this
        let resBody = new Add();
        if (form.ENDDATETIME.substring(0,12) <= form.SRTDATETIME.substring(0,12)) {
          this.$message({
            type: "error",
            message: "休假结束时间必须大于开始时间"
          })
          return false
        }
        debugger
        resBody.data.ACTIVITYTYPE = form.ACTIVITYTYPE;
        resBody.data.AGENTID = form.AGENTID;
        resBody.data.HOURS = form.HOURS;
        resBody.data.NOTE1 = form.NOTE1;
        resBody.data.SRTDATETIME = form.SRTDATETIME;
        resBody.data.ENDDATETIME = form.ENDDATETIME;
        //console.log(resBody.data)
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          // console.log(response)
          // this.resData = response.BODY.BRANCHDATA;
          // this.toJson();
          this.$message({
            type: "success",
            message: "申请成功"
          })
          this.dialogVisible = false;
          this.resetForm('form')
          this.$emit('ListenVacation')
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
    },
    computed: {
      isShow: {
        get() {
          return this.option.dialogVisible;
        },
        set(value) {
          this.option.dialogVisible = value;
        }
      },
    },
  }

</script>
<style lang='scss' scoped>
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }

</style>
